<template>
  <div class="mouldDetailsPage">
      <div class="box">
        塑造结果
      </div>
      <div class="containerShow">
          <div class="leftVideo">
            <video v-if="filenameType == 1" :src="filename" controls></video>
            <audio class="audio" v-else-if="filenameType == 2" :src="filename" controls></audio>
            <img v-else-if="filenameType == 3" :src="filename" alt="">

              <div class="timer">
                  塑造时间: <span>{{timer}}</span>
              </div>
          </div>
          <div class="parameterBox">
              <div class="lists" v-for="(item,index) in lists" :key="index">
                  <span>{{item.label}}</span>
                  <div class="pb_material">
                    <video v-if="item.type == 1" :src="item.url" controls></video>
                    <audio class="audio" v-else-if="item.type == 2" :src="item.url" controls></audio>
                    <img v-else-if="item.type == 3" :src="item.url" alt="">
                  </div>
              </div>
        </div>
      </div>
      <div class="box">
        塑造程序信息
      </div>
      <div class="bottomLine">
          <div>
              塑造程序：
          </div>
          <div style="color:#8D8D8D">
              {{programName}}
          </div>
          
      </div>

      <div class="bottom">
        <el-button class="back" @click="back">返回</el-button>
      </div>
  </div>
</template>

<script>
import lines from '../../../components/lines.vue'
import { getMouldById } from '../../../api/index'
export default {
    components:{
        lines
    },
    data(){
        return{
            lists:[],
            id: '',
            programName:'',
            filename: '',
            filenameType: '',
            timer: '',
        }
    },
    mounted(){
        this.id = this.$route.query.id
        this.init()
    },
    methods:{
        init(){
            let id = this.id
            let params = { id }
            getMouldById( params ).then(res=>{
                if(res.data.message == "success"){
                    let re = res.data.data
                    this.programName = re.programName
                    this.filename = re.filename
                    this.filenameType 
                    
                    let ftp = re.filename.substring(re.filename.lastIndexOf(".")+1)
                    if ( ftp == 'mp4'){
                        this.filenameType = 1
                    }else if(ftp == 'wav'){
                        this.filenameType = 2
                        
                    }else if(ftp == 'png' || ftp == 'jpg'|| ftp == 'jpeg'){
                        this.filenameType = 3
                    }



                    this.timer = re.createTime
                    if(re.filePathParameters1 && re.filePathParameters1 != null){
                        let type = re.filePathParameters1.substring(re.filePathParameters1.lastIndexOf(".")+1)
                        if ( type == 'mp4'){
                            this.lists.push({
                                label:'参数1: ',
                                type: 1,
                                url: re.filePathParameters1,
                            })
                        }else if(type == 'wav'){
                            this.lists.push({
                                label:'参数1: ',
                                type: 2,
                                url: re.filePathParameters1,
                            })
                        }else if(type == 'png' || type == 'jpg'|| type == 'jpeg'){
                            this.lists.push({
                                label:'参数1: ',
                                type: 3,
                                url: re.filePathParameters1,
                            })
                        }
                        
                    }
                    if(re.filePathParameters2 && re.filePathParameters2 != null){
                        let type = re.filePathParameters2.substring(re.filePathParameters2.lastIndexOf(".")+1)
                        if ( type == 'mp4'){
                            this.lists.push({
                                label:'参数2: ',
                                type: 1,
                                url: re.filePathParameters2,
                            })
                        }else if(type == 'wav'){
                            this.lists.push({
                                label:'参数2: ',
                                type: 2,
                                url: re.filePathParameters2,
                            })
                        }else if(type == 'png' || type == 'jpg'|| type == 'jpeg'){
                            this.lists.push({
                                label:'参数2: ',
                                type: 3,
                                url: re.filePathParameters2,
                            })
                        }
                        
                    }
                    if(re.filePathParameters3 && re.filePathParameters3 != null){
                        let type = re.filePathParameters3.substring(re.filePathParameters3.lastIndexOf(".")+1)
                        if ( type == 'mp4'){
                            this.lists.push({
                                label:'参数3: ',
                                type: 1,
                                url: re.filePathParameters3,
                            })
                        }else if(type == 'wav'){
                            this.lists.push({
                                label:'参数3: ',
                                type: 2,
                                url: re.filePathParameters3,
                            })
                        }else if(type == 'png' || type == 'jpg'|| type == 'jpeg'){
                            this.lists.push({
                                label:'参数3: ',
                                type: 3,
                                url: re.filePathParameters3,
                            })
                        }
                        
                    }
                    if(re.filePathParameters4 && re.filePathParameters4 != null){
                        let type = re.filePathParameters4.substring(re.filePathParameters4.lastIndexOf(".")+1)
                        if ( type == 'mp4'){
                            this.lists.push({
                                label:'参数4: ',
                                type: 1,
                                url: re.filePathParameters4,
                            })
                        }else if(type == 'wav'){
                            this.lists.push({
                                label:'参数4: ',
                                type: 2,
                                url: re.filePathParameters4,
                            })
                        }else if(type == 'png' || type == 'jpg'|| type == 'jpeg'){
                            this.lists.push({
                                label:'参数4: ',
                                type: 3,
                                url: re.filePathParameters4,
                            })
                        }
                        
                    }
                }
            })
        },
        back(){
          this.$router.push('/home/mould')
        }

    }
}
</script>

<style lang='less' scoped>
.mouldDetailsPage{
    padding: 15px;
    background-color: #282C41;
    height: 716px;
    min-width: 1350px;
    box-sizing: border-box;
    .box{
        width: 200px;
        height: 37px;
        line-height: 37px;
        background: #2B6982;
        border-radius: 1px;
        color: #fff;
        padding-left: 10px;
        font-size: 20px;
    }
    .containerShow{
        width: 100%;
        padding: 15px 0;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        .leftVideo{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            width: 630px;
            margin-left: 152px;
            margin-right: 120px;
            >video{
              height: 412px;
              max-width: 630px;
            }
            >audio{
              height: 412px;
              max-width: 630px;
            }
            >img{
              height: 412px;
              max-width: 630px;
            }
        }
    }
    .parameterBox{
        display: flex;
        // align-content: center;
        flex-wrap: wrap;
        height: 461px;
        width: 680px;
        .lists{
            width: 45%;
            height: 167px;
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
            padding-right:20px ;
            .pb_material{
              width: 242px;
              height: 167px;
            //   background-color: #4F5367;
              margin: auto;
              display: contents;
            }
            >span{
                font-size: 14px;
                color: #fff;
                width: 50px;
            }
            >div{
                width: 100%;
                >img{
                  max-width: 242px;
                  max-height: 167px;
                  display: block;
                  margin: auto;
                }
                >video{
                  max-width: 242px;
                  max-height: 167px;
                  display: block;
                  margin: auto;
                }
                .audio{
                  max-width: 242px;
                  max-height: 167px;
                  display: block;
                  margin: auto;
                }
            }
            
        }
    }
    .timer{
        margin-top: 10px;
        font-size: 16px;
        color: #fff;
        >span{
            margin-left: 10px;
            color: #a5a1a1;
        }
    }
    .bottomLine{
        padding-left: 152px;
        display: flex;
        color: #fff;
        margin-top: 20px;
    }
    .bottom{
      width: calc(100% - 200px);
      height: 70px;
      position: fixed;
      bottom: 0;
      left: 200px;
      background-color: #282C41;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .back{
        background-color: transparent;
        border: 1px solid #fff;
        color: #fff;
        border-radius: 2px;
        width: 122px;
        margin-right: 53px;
        width: 122px;
      }
    }
}
</style>